<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/login.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body>
	<div class="regbox">
		<form method="post" class="form-horizontal" id="login-form" action="${pageContext.request.contextPath}/user/userAction!reg">
			<div class="form-group">
				<label class="col-sm-3 control-label"><s:text name="account"/></label>
				<div class="col-sm-9">
					<input type="text" name="account" id="account" class="form-control" placeholder="Account/Email">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label"><s:text name="password"/></label>
				<div class="col-sm-9">
					<input type="password" name="password" id="pwd" class="form-control" placeholder="password">
				</div>
				<s:fielderror fieldName="password"/>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label"><s:text name="name"/></label>
				<div class="col-sm-9">
					<input type="text" name="name" class="form-control" placeholder="name">
				</div>
				<s:fielderror fieldName="name"/>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">真实姓名</label>
				<div class="col-sm-9">
					<input type="text" name="realname" class="form-control" placeholder="realname">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">出生日期</label>
				<div class="col-sm-9">
					<input type="text" name="birthdate" class="form-control" id="datepicker" placeholder="click choose date">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">性别</label>
				<div class="col-sm-9">
					<lable> 
					<label for="male">男</label>
				    <input type="radio" name="sex" id="male" value="男" checked /> 
				    <label for="female">女</label> 
				    <input type="radio" name="sex" id="female" value="女" /> 
				    </lable>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">手机</label>
				<div class="col-sm-9">
					<input type="text" name="phone" class="form-control" placeholder="phone">
				</div>
				<s:fielderror fieldName="phone"/>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">QQ</label>
				<div class="col-sm-9">
					<input type="text" name="qq" class="form-control" placeholder="qq">
				</div>
				<s:fielderror fieldName="qq"/>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">个人主页</label>
				<div class="col-sm-9">
					<input type="text" name="homepage" class="form-control" placeholder="homepage">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">兴趣爱好</label>
				<div class="col-sm-9">
					<div class="checkbox">
						<label>
							<input type="checkbox" name="interests" value="音乐">
							音乐
						</label>
						<label>
							<input type="checkbox" name="interests" value="游戏">
							游戏
						</label>
						<label>
							<input type="checkbox" name="interests" value="电影">
							电影
						</label>
						<label>
							<input type="checkbox" name="interests" value="看书">
							看书
						</label>
						<label>
							<input type="checkbox" name="interests" value="运动">
							运动
						</label>
						<label>
							<input type="checkbox" name="interests" value="登山">
							登山
						</label>
						<label>
							<input type="checkbox" name="interests" value="游泳">
							游泳
						</label>
						<label>
							<input type="checkbox" name="interests" value="写字">
							写字
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">E-mail</label>
				<div class="col-sm-9">
					<input type="text" name="email" class="form-control" placeholder="email">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label"></label>
				<div class="col-sm-9">
					<button type="button" id="subm" class="btn btn-success">提交</button>
					<a class="btn btn-primary" href="${pageContext.request.contextPath}/jsp/index.jsp" role="button">返回</a>
				</div>
			</div>
			<s:if test="%{json != null}">
				<span style="color: red;">${json.msg}</span>
			</s:if>
		</form>
	</div>
</body>
</html>
<script>
	/*
	 *时间控件相关参数方法参阅  http://www.bootcss.com/p/bootstrap-datetimepicker 
	 */
	$("#datepicker").datetimepicker({
		format : 'yyyy-mm-dd',
		minView : 2,
		autoclose : true,
		startView : 4,
		language : "zh-CN"
	});

	var flagAcc=false;
	var flagPwd=false;
	$("#pwd").blur(function(){
		var to = $(this).offset().top +4;
		var width = $(this).width();
		var le = $(this).offset().left + width +30;
		if($(this).val().length < 6){
			$("#pwdmsg").remove();
			$("<div id='pwdmsg' style='color:red;z-index:99;position:absolute;left:"+le+"px;top:"+to+"px;'>请输入六位以上的密码!</div>").appendTo("body");
			flagPwd = false;
		}else{
			$("#pwdmsg").remove();
			flagPwd = true;
		}
	});

	$("#account").blur(function(){
		var to = $(this).offset().top +4;
		var width = $(this).width();
		var le = $(this).offset().left + width +30;

		if($(this).val() == "" || $(this).val().length == 0){
			$("#accmsg").remove();
			$("<div id='accmsg' style='color:red;z-index:99;position:absolute;left:"+le+"px;top:"+to+"px;'>用户名不能为空</div>").appendTo("body");
			flagAcc = false;
			return;
		}
		$.ajax({
			url:"${pageContext.request.contextPath}/user/userAction!checkReg",
		    data:{'account':$(this).val()},
			dataType:'json',
			success:function(data){
				if(!data.success){
					$("#accmsg").remove();
					$("<div id='accmsg' style='color:red;z-index:99;position:absolute;left:"+le+"px;top:"+to+"px;'>"+data.msg+"</div>").appendTo("body");
					flagAcc = false;
				}else{
					$("#accmsg").remove();
					$("<div id='accmsg' style='color:green;z-index:99;position:absolute;left:"+le+"px;top:"+to+"px;'>"+data.msg+"</div>").appendTo("body");
					flagAcc = true;
				}
			}
		});
	});

	$("#subm").click(function(){
		$("#login-form").find("input[type=text]").each(function(){
			if($(this).val() == "" || $(this).val().length == 0){
				$(this).focus();
				return;
			}
		});

		if(flagAcc && flagPwd){
			$("#login-form").submit();
		}
	});

</script>